<template>
    <div class="quick-menuAll">
        <!--<router-link to="/recommend">quick-menu</router-link>-->
        <div class="quickAll-head" slot="slot-header">
            <div class="qHeadOne">
                <router-link to="/recommend" class="qHeadLink">
                    <i class="qHead-icon">&#xe600;</i>
                </router-link>
            </div>
            <div class="qHeadTwo">
                <i class="qHead-icon">&#xe609;</i>
                <span>成都</span>
            </div>
            <div class="qHeadThree">
                <i class="qHead-icon">&#xe643;</i>
                <input type="text" placeholder="搜索热门景点或路线">
            </div>
            <div class="qHeadFour">
                <button>搜索</button>
            </div>
        </div>
        <div class="quickNav">
            <div class="quickNavList"  @click="goTo('/quickmenu/recomspots')">
                <p :class="{borderB : '/quickmenu/recomspots' === $route.path}">推荐景点</p>
            </div>
            <div class="quickNavList" @click="goTo('/quickmenu/recomhotel')">
                <p :class="{borderB : '/quickmenu/recomhotel' === $route.path}" >推荐酒店</p>
            </div>
            <div class="quickNavList" @click="goTo('/quickmenu/recomfood')">
                <p :class="{borderB : '/quickmenu/recomfood' === $route.path}" >推荐美食</p>
            </div>
        </div>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "index",
        methods: {
            goTo(path) {
                this.$router.replace(path)
            },
        }
    }
</script>

<style>
    .borderB{
        border-bottom: 4px solid #ec9b3b;
    }
    .qHead-icon {
        font-family: iconfont;
        font-style: normal;
    }

    .quickAll-head {
        width: 700px;
        height: 96px;
        margin: 0 auto;
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
    }

    .quickAll-head > div {
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    .qHeadOne {
        width: 36px;
        height: 100%;
    }
    .qHeadLink {
        color: black;
    }
    .qHeadTwo {
        width: 110px;
        height: 100%;
        font-size: 28px;
    }

    .qHeadThree {
        width: 450px;
        height: 100%;
        background: #e5e5e5;
        display: flex;
        border-bottom-right-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;
    }

    .qHeadThree > i {
        display: block;
        width: 15%;
        color: #999;

    }

    .qHeadThree > input {
        display: block;
        width: 85%;
        border: none;
        background: none;
        outline: none;
        line-height: 60px;
    }

    .qHeadFour {
        width: 56px;
        height: 100%;
    }

    .qHeadFour > button {
        height: 60px;
        font-size: 28px;
        border: none;
        background: none;
        outline: none;
        line-height: 60px;
    }
    .quickNav{
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .quickNavList{
        width: 33%;
        height: 70px;
        position: relative;
    }
    .quickNavList>p{
        width: 144px;
        height: 100%;
        text-align: center;
        line-height: 70px;
        font-size: 36px;
        text-overflow:ellipsis;
        white-space:nowrap;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
